<template>
	<div class="artistslist">
		<van-cell v-for="(val,ind) in artistsaftertenData" :key="ind" @click="getsonglist(val.id)">
			<img v-lazy="val.picUrl" style="width: 100%;">
			<div>
				<p>第{{ind+1}}名</p>
				<p>姓名：{{val.name}}</p>
				<p>别名：<i v-for=" (val1,ind1) in val.alias" :key="ind1">{{val1}}</i></p>
				<p>关注量：{{val.fansCount}}</p>
			</div>
		</van-cell>
		<div style="height: 90px;"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//热门歌手前10数据
				artistsaftertenData: [],
			};
		},
		created() {
			this.getartistsaftertenData()
		},
		methods: {
			//获取热门歌手前10数据
			async getartistsaftertenData() {
				let {
					data: ret
				} = await this.$http.get('/top/artists?limit=10')
				console.log(ret)
				this.artistsaftertenData = ret.artists
			},
			getsonglist(id) {
				this.$router.push({
					path: '/artistslist',
					query: {
						id
					},
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.artistslist {
		.van-cell {
			border-bottom: 1px solid green;
		}
	}
</style>
